<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>测试案例</title>
        <style type="text/css">
            span {
                 display: block;
                width: 120px;
                height: 30px;
                background: red;
            }
            
            div {
                display: inline;
                width: 120px;  /* 宽度和高度设置对行内盒无效 */
                height: 200px;
                background: green;
            }
            
            i {
                display: inline-block;
                width: 120px;
                height: 30px;
                background: lightblue;
            }
        </style>
    </head>

    <body>
        <span>行内转块状</span>
        <div>块状转行内 <strong>yangkai</strong></div>
        <i>行内转行内块状</i>
    </body>

</html>